<script setup lang='ts'>
import { ref, onMounted } from "vue"
import LoadingPage from "@/components/LoadingPage.vue"
import LoadingView from "@/components/LoadingView.vue"
import HumanHotPage from "@/components/HumanHotPage.vue"
import BookViewFirst from "@/components/BookViewFirst.vue"
import BookViewSecond from "@/components/BookViewSecond.vue"
import { getBookPublishInfo, getBookChapterList } from "@/api/index"
import { useRouter } from 'vue-router'
import { useCounterStore } from '../stores/counter'
const store = useCounterStore()
const $router = useRouter()
const isLoading = ref<boolean>(true)
const isLoadingView = ref<boolean>(false)
const bookPublishInfo = ref<any>()
onMounted(async () => {
    let res = await getBookPublishInfo($router.currentRoute.value.query.uuid);
    bookPublishInfo.value = res.data.data.list

    isLoading.value = false
})

const toBookContent = async (book: any) => {

    let bookChapterRes = await getBookChapterList(book.id)

    store.getChapter(bookChapterRes.data.data.catalog)
    $router.push({
        path: '/content', query: {
            source_uuid: bookChapterRes.data.data.book.sourceUuid, content_uuid: bookChapterRes.data.data.catalog[1].uuid, title: book.title, index: 1
        }
    })
}
const toShortCutNav = (str: string) => {


    if (str == '新书') {
        $router.push({ path: '/shortCut', query: { url: bookPublishInfo.value[1].shortCut[1].url, type: '新书', nav: '出版' } })
    } else if (str == '排行') {
        $router.push({ path: '/shortCut', query: { url: bookPublishInfo.value[2].more.url, type: '排行', nav: '出版' } })
    } else if (str == '特价') {
        $router.push({ path: '/publish-nav', query: { url: bookPublishInfo.value[1].shortCut[0].url } })

    } else if (str == '影视') {
        console.log(str);
        $router.push({ path: '/publish-nav', query: { url: bookPublishInfo.value[1].shortCut[2].url } })
    } else {
        console.log(str);
        $router.push({ path: '/publish-nav', query: { url: bookPublishInfo.value[1].shortCut[3].url } })
    }
}

const toBookSomething = async (book: any) => {
    isLoadingView.value = true
    if (book.p_action == 500) { //进小说文字页
        let bookChapterRes = await getBookChapterList(book.id)
        store.getChapter(bookChapterRes.data.data.catalog)
        isLoadingView.value = false
        $router.push({
            path: '/content', query: {
                source_uuid: bookChapterRes.data.data.book.sourceUuid, content_uuid: bookChapterRes.data.data.catalog[1].uuid, title: book.title, index: 1
            }
        })
    } else if (book.p_action == 200) {  //进书本详情2页（可购买）
        isLoadingView.value = false
        $router.push({ path: '/publish-detail', query: { id: book.id, title: book.title } })

    } else if (book.p_action == 1) {  //进二十大
        isLoadingView.value = false
        window.location.href = book.url;
    }

}
</script>

<template>
    <div :style="{ height: '100%', width: '100%' }">
        <LoadingView v-if="isLoadingView" />
        <div class="publish">
            <LoadingPage v-if="isLoading" />
            <div class="publish-content" v-else>
                <div class="banner" v-if="bookPublishInfo[0]">
                    <van-swipe :autoplay="3000" lazy-render :indicator-color="'#fff'">
                        <van-swipe-item v-for="image in bookPublishInfo[0].banners" :key="image">
                            <img :src="image.cover" @click="toBookSomething(image)" />
                        </van-swipe-item>
                    </van-swipe>
                </div>
                <div class="short-cut">
                    <ul class="list">
                        <li v-for="cut, index in bookPublishInfo[1].shortCut" :key="index"
                            @click="toShortCutNav(cut.name)">
                            <img :src="cut.cover + '?imageView&thumbnail=240y336'" alt="">
                            <span>{{ cut.name }}</span>
                        </li>
                    </ul>
                </div>
                <div class="thisweek-hot" v-if="bookPublishInfo[2]">
                    <h3>{{ bookPublishInfo[2].name }}</h3>
                    <div class="thisweek-hot-list">
                        <HumanHotPage v-for="book, index in bookPublishInfo[2].list" :key="book.id" :bookinfo="book"
                            :index="index" @click="toBookSomething(book)" />
                    </div>
                    <p @click="toShortCutNav('排行')">查看榜单 ></p>
                </div>
                <div class="suspense" v-if="bookPublishInfo[3]">
                    <h3>{{ bookPublishInfo[3].name }}</h3>
                    <div class="new-book-list" v-if="bookPublishInfo[3].list.length == 4">
                        <BookViewSecond v-for="book in bookPublishInfo[3].list" :key="book.id" :book="book"
                            @click="toBookSomething(book)" />
                    </div>
                    <div class="thisweek-hot-list" v-if="bookPublishInfo[3].list.length == 3">
                        <HumanHotPage v-for="book, index in bookPublishInfo[3].list" :key="book.id" :bookinfo="book"
                            :index="index" @click="toBookSomething(book)" />

                    </div>
                </div>
                <div class="boutique" v-if="bookPublishInfo[4]">
                    <h3 v-if="bookPublishInfo[4].list">{{ bookPublishInfo[4].name }}</h3>
                    <BookViewFirst v-for="book in bookPublishInfo[4].list" :key="book.id" :bookinfo="book"
                        @click="toBookSomething(book)" v-if="bookPublishInfo[4].list" />

                    <div class="banner2" v-if="!bookPublishInfo[4].list">
                        <img :src="bookPublishInfo[4].cover" alt="" @click="toBookSomething(bookPublishInfo[4])">
                    </div>

                </div>
                <div class="banner2" v-if="!bookPublishInfo[5].list">
                    <img :src="bookPublishInfo[5].cover" alt="" @click="toBookSomething(bookPublishInfo[5])">
                </div>
                <div class="history" v-if="bookPublishInfo[6]">
                    <h3>{{ bookPublishInfo[6].name }}</h3>
                    <div class="history-list">
                        <BookViewSecond v-for="book in bookPublishInfo[6].list" :key="book.id" :book="book"
                            @click="toBookSomething(book)" />
                    </div>
                </div>
                <div class="youth" v-if="bookPublishInfo[7]">
                    <h3>{{ bookPublishInfo[7].name }}</h3>
                    <div class="youth-list" v-if="bookPublishInfo[3].list.length == 4">
                        <BookViewSecond v-for="book in bookPublishInfo[7].list" :key="book.id" :book="book"
                            @click="toBookSomething(book)" />
                    </div>
                    <div class="thisweek-hot-list" v-if="bookPublishInfo[3].list.length == 3">
                        <HumanHotPage v-for="book, index in bookPublishInfo[3].list" :key="book.id" :bookinfo="book"
                            :index="index" @click="toBookSomething(book)" />

                    </div>
                </div>
                <div class="worth-book" v-if="bookPublishInfo[8]">
                    <h3>{{ bookPublishInfo[8].name }}</h3>
                    <BookViewFirst v-for="book in bookPublishInfo[8].list" :key="book.id" :bookinfo="book"
                        @click="toBookSomething(book)" />
                </div>
                <div class="live-book" v-if="bookPublishInfo[9]">
                    <h3>{{ bookPublishInfo[9].name }}</h3>
                    <BookViewFirst v-for="book in bookPublishInfo[9].list" :key="book.id" :bookinfo="book"
                        @click="toBookSomething(book)" />
                </div>
                <div class="study-book" v-if="bookPublishInfo[10]">
                    <h3 v-if="bookPublishInfo[10].list">{{ bookPublishInfo[10].name }}</h3>
                    <BookViewFirst v-for="book in bookPublishInfo[10].list" :key="book.id" :bookinfo="book"
                        @click="toBookSomething(book)" v-if="bookPublishInfo[10].list" />
                    <div class="banner2" v-if="!bookPublishInfo[10].list">
                        <img :src="bookPublishInfo[10].cover" alt="" @click="toBookSomething(bookPublishInfo[10])">
                    </div>
                </div>
                <div class="banner3" v-if="bookPublishInfo[11]">
                    <img :src="bookPublishInfo[11].cover" alt="" @click="toBookSomething(bookPublishInfo[11])">
                </div>
                <div class="bottom">
                    <p>我是有底线的</p>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.publish {
    width: 100%;
    height: 100%;

    >.publish-content {
        .banner {
            // display: flex;
            width: 100%;
            overflow: hidden;

            img {
                width: 100%;
            }
        }

        .thisweek-hot,
        .suspense,
        .youth {
            margin-top: 25rem;
            border-bottom: 1px solid #eee;
            width: 100%;
            padding-bottom: 10rem;

            h3 {
                margin-bottom: 10rem;
            }

            .thisweek-hot-list {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }

            >p {
                text-align: center;
                font-size: 14rem;
                color: #888;

            }
        }

        .short-cut {
            ul.list {
                display: flex;
                justify-content: space-between;
                padding: 10rem 15rem 0;

                li {
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    img {
                        width: 50rem;
                    }

                    span {
                        font-size: 13rem;
                        color: #333;
                    }
                }
            }
        }

        .suspense,
        .history,
        .youth {

            margin-top: 25rem;
            border-bottom: 1px solid #eee;
            width: 100%;
            padding-bottom: 10rem;

            >h3 {
                margin-bottom: 10rem;
            }

            .new-book-list,
            .potential-book-list,
            .history-list,
            .youth-list {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }

        }

        .boutique,
        .worth-book,
        .live-book,
        .study-book {
            margin-top: 25rem;
            border-bottom: 1px solid #eee;

            h3 {
                margin-bottom: 10rem;
            }
        }

        .banner2,
        .banner3 {
            width: 100%;
            padding: 14rem 0 20rem;
            border-bottom: 1px solid #eee;

            img {
                border: 5rem;
                width: 100%;
            }
        }

        .bottom {
            padding: 15rem 0;

            p {
                text-align: center;
                // padding-bottom: 10rem;
                color: #999
            }
        }
    }
}
</style>
